<template>
  <div class="app-container software-container">
    <div class="listBox"> 
      <el-button type="text" icon="el-icon-s-promotion" @click="toListIndex">返回首页</el-button>
    </div>
     <div>
      <el-button type="text" icon="el-icon-back" @click="back">返回</el-button>
    </div>
    <!-- 软件系统 -->
    <el-divider content-position="left">软件系统清单</el-divider>
     <div class="table">
      <el-table :data="tableData"  v-loading="loading" style="width: 100%" border stripe>
      <el-table-column label="序号" type="index" width="50"> </el-table-column>
      <el-table-column prop="name" label="名称" width="150"> </el-table-column>
      <el-table-column prop="detailed" label="详细" width="150"> </el-table-column>
      <el-table-column prop="position" label="安装位置" width="80"></el-table-column>
      <el-table-column prop="num" label="数量" width="50"></el-table-column>
      <el-table-column prop="procureTime" label="采购时间" width="100"></el-table-column>
      <el-table-column prop="totalAmount" label="总金额" width="80"></el-table-column>
      <el-table-column prop="purchasingUnit" label="采购单位" width="150"></el-table-column>
      <el-table-column prop="function" label="功能说明"></el-table-column>
      <el-table-column prop="notes" label="备注" width="80"></el-table-column>
    </el-table>
    </div>
    <!-- <el-divider content-position="left">图片展示</el-divider> -->
    <!-- <div class="demo-image__preview">
      <el-image 
        style="width: 400px; height: 200px"
        :src="url" 
        :preview-src-list="srcList">
      </el-image>
    </div> -->
  </div>
</template>

<script>
// import softPng from '@/static/images/softwareList.png'
export default {
  name: 'Software',
  data() {
    return {
      tableData: [],
      loading: false,
      // url: softPng,
      // srcList: [softPng]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    back() {
       this.$router.go(-1)
     },
     // 返回首页
     toListIndex() {
        this.$router.push({
         path: '/ListIndex'
       })
    },
    getList() {
      this.loading = true
         setTimeout(() => {
          const res = {
            code: 200,
            data: [
              {name: '虚拟化软件',detailed: '深信服虚拟化软件', position: '', num: 1, procureTime: '2017-10-30', totalAmount: 56500, purchasingUnit: '石家庄欣飞东方科技有限公司', function: '服务器虚拟化平台基础软件，可实现单个服务器划分出多个模拟服务器，最大化利用硬件服务器，现有服务器通过虚拟化软件，每台服务器都运行10几个服务器操作系统。', notes: ''},
              {name: 'win ser操作系统',detailed: 'Microsoft Windows Serve2012标准版', position: '', num: 3, procureTime: '2016-11-2', totalAmount: 46800, purchasingUnit: '石家庄欣飞东方科技有限公司', function: '', notes: ''},
              {name: '数据库',detailed: '微软SQL Server 2014 15客户', position: '', num: 1, procureTime: '2016-11-2', totalAmount: 38500, purchasingUnit: '石家庄欣飞东方科技有限公司', function: '', notes: ''},
              {name: '双机热备',detailed: 'rose ha', position: '', num: 1, procureTime: '2016-11-2', totalAmount: 8600, purchasingUnit: '石家庄欣飞东方科技有限公司', function: '', notes: ''},
              {name: '麒麟国产操作系统',detailed: '麒麟LINUX V10', position: '', num: 5, procureTime: '2022-10-26', totalAmount: 41700, purchasingUnit: '河北众合锦程信息技术有限公司', function: '', notes: ''},
              {name: '政府网站防护系统',detailed: '网防G01', position: '', num: 1, procureTime: '2017-10-30', totalAmount: 78000, purchasingUnit: '石家庄欣飞东方科技有限公司', function: '', notes: ''},
              {name: '数据交换软件',detailed: '东方通ETL工具软件', position: '', num: 1, procureTime: '2018-10-26', totalAmount: 199800, purchasingUnit: '石家庄欣飞东方科技有限公司', function: '', notes: ''},
            ],
            msg: '数据获取成功'
          }
          // console.log(JSON.stringify(res.data));
          this.tableData = res.data
          this.loading = false
        }, 1000)
      
    }
  }
}
</script>

<style lang="less" scoped>
  .software-container {
    // padding: 20px;
    .el-divider__text {
      font-size: 18px;
    }
    .listBox {
      position: absolute;
        top: 6%;
        right:3%;
       
      }
  }
 
</style>
